<template>
	<view class="center">
		<!-- 头部 -->
		<view class="header" :style="{height: AppstatusBarHeight + 'px'}">
			<view class="header-name" :style="{paddingTop: NavstatusBarHeight + 'px'}">
				首页
			</view>
		</view>
		<!-- 切换页面 -->
		<swiper class="content" vertical :current="current" @change="getChange">
			<swiper-item v-for="(item,index) in SwiperList">
				<view class="swiper-item">
					<video :autoplay="autoplay" :data-id="item.id" :id="'myVideo'+ item.id" class="swiper_video" :src="item.url"
						:show-center-play-btn="play_btn" :controls="constrols" @ended="VideoEnd"
						@click="SwiperClick">
					</video>
				</view>
				<!-- 视频上面的图标 -->
				<view class="swiper_icon">
					<view class="avatar">
						<image :src="item.avatar" />
						<icon class="iconfont icon-add add"></icon>
					</view>
					<icon class="iconfont icon-like_fill"></icon>
					<text>50</text>
					<icon class="iconfont icon-comments-01"></icon>
					<text>20</text>
					<icon class="iconfont icon-collection_fill"></icon>
					<text>30</text>
					<icon class="iconfont icon-ForwardFilled-1"></icon>
					<text>10</text>
				</view>
				<!-- 视频上面的基本信息 -->
				<view class="swiper_bottom">
					<view class="avatar_name">
						<text>@{{item.name}}</text>
					</view>
					<view class="avatar_description">
						<text>{{item.description}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				ClickStatus: false, //未点击 
				play_btn: false, //视频中间的播放按钮隐藏
				autoplay: false, // 自动播放关闭
				constrols: false, // 隐藏默认视频控制组件
				current: 0, // 视频当前的引数
				dynListData: [],
				AppstatusBarHeight: 0,
				NavstatusBarHeight: 0,
				SwiperList: [{
						id: 0,
						name: '测试账号',
						url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
						avatar: 'https://p.qqan.com/up/2019-9/15674712456869139.jpg',
						like_num: '30', //喜欢
						comments_num: '15', //评论
						collection_num: '16', //收藏
						forward_num: '10', //转发
						description: "该作品的介绍显示在下面该作品的介绍显示在下面"
					},
					{
						id: 1,
						name: '测试账号',
						url: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
						avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.TFbjF6j_KCtLM6F8s_ByMwAAAA?rs=1&pid=ImgDetMain',
						like_num: '20', //喜欢
						comments_num: '5', //评论
						collection_num: '10', //收藏
						forward_num: '20', //转发
						description: "该作品的介绍显示在下面该作品的介绍显示在下面该作品的介绍显示在下面该作品的介绍显示在下面"
					}
				]
			}
		},

		onLoad() {
			this.AppstatusBarHeight = app.globalData.AppstatusBarHeight,
				this.NavstatusBarHeight = app.globalData.NavstatusBarHeight
			let num = 0;
			let time = setInterval(() => {
				uni.showLoading({
					title: '加载中····'
				})
				num++;
				if (num >= 5) {
					let currens = 'myVideo' + this.current;
					uni.hideLoading();
					clearInterval(time);
					uni.createVideoContext(currens).play();
				}
			}, 1000)
		},

		methods: {
			// 视频切换
			getChange(e) {
				this.current = e.detail.current
				// console.log(this.current);
				let up = this.current == 0 ? this.SwiperList.length - 1 : this.current - 1
				let dow = this.current == 0 ? this.SwiperList.length - 1 : this.current + 1
				if (this.current === this.current) {
					let currens = 'myVideo' + this.current;
					let num = 0;
					let time = setInterval(() => {
						uni.showLoading({
							title: '加载中····'
						})
						num++;
						if (num >= 5) {
							uni.hideLoading();
							clearInterval(time);
							uni.createVideoContext(currens).play();
						}
					}, 1000)
				}
				
				let ups = 'myVideo' + up;
				let dows = 'myVideo' + dow;
				uni.createVideoContext(ups).pause();
				uni.createVideoContext(dows).pause();
			},
			
			// 视频点击
			SwiperClick(e) {
				let ClickStatus = this.$data.ClickStatus;
				let VideoStatus = e.target.id
				if(!ClickStatus) {
					uni.createVideoContext(VideoStatus).play(),
					this.ClickStatus = true
				}else {
					uni.createVideoContext(VideoStatus).pause(),
					this.ClickStatus = false
				}
			},
			
			VideoEnd(e) {
				let VideoId = e.currentTarget.id
				uni.createVideoContext(VideoId).play()
			},
		}
	}
</script>

<style>
	/* 头部 */
	.header {
		width: 100%;
		color: white;
		position: fixed;
		text-align: center;
		z-index: 888 !important;
	}

	/* 头像 */
	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-bottom: 1rem;
		position: relative;
	}

	.avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar icon {
		position: absolute;
		z-index: 5;
		right: 16px;
		bottom: -17px;
	}

	.avatar .add {
		color: red;
		font-size: 17px;
	}

	/* 视频区域 */
	.content {
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.swiper_video {
		width: 100%;
		height: 100%;
	}

	/* 视频右边的图标设置 */
	.swiper_icon {
		position: fixed;
		z-index: 5;
		display: flex;
		flex-direction: column;
		right: 15px;
		bottom: 60px;
		text-align: center;
	}

	.swiper_icon icon {
		font-size: 43px;
		margin: 10px 0;
		color: white;
	}

	.swiper_icon text {
		color: white;
	}

	/* 底部基本信息区域 */
	.swiper_bottom {
		width: 100%;
		z-index: 5;
		left: 0;
		right: 0;
		bottom: 0;
		color: white;
		padding: 20px 20px;
		position: fixed;
	}

	.avatar_description {
		width: 75%;
		margin-top: 10px;
		overflow: hidden;
		text-align: justify;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 超出几行省略 */
	}

	.avatar_name {
		font-weight: bold;
	}
</style>